<template>
  <view class="fee-card">
    <u-cell :title="title" :value="priceDisplay">
      <template #right-icon>
        <slot name="extra"></slot>
        <u-button 
          v-if="showActionButton" 
          size="" 
          :type="actionType"
          @click="$emit('action')"
          :custom-style="buttonStyle"
        >
          {{ actionText }}
        </u-button>
      </template>
    </u-cell>
    <!-- 自定义时间显示 -->
    <view v-if="endTime" class="time-display">
      <text>{{ timeStatusText }}</text>
      <text v-if="daysRemaining >= 0" class="days">（剩余{{ daysRemaining }}天）</text>
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    title: {
      type: String,
      required: true 
    },
    price: {
      type: String,
      default: ''
    },
    expired: {
      type: Boolean,
      default: undefined 
    },
    endTime: {
      type: [Number, String],
      default: null 
    },
    // 新增：是否显示天数计算 
    showDays: {
      type: Boolean,
      default: true 
    }
  },
  computed: {
    // 价格显示（处理免费情况）
    priceDisplay() {
      return this.price.includes(' 免费') ? '免费' : this.price; 
    },
    showActionButton() {
      return this.expired  !== undefined;
    },
    actionText() {
      return this.expired  ? '续费' : '取消';
    },
    actionType() {
      return this.expired  ? 'primary' : 'default';
    },
    // 按钮自定义样式 
    buttonStyle() {
      return {
        marginLeft: '10rpx',
        width: this.expired  ? '100rpx' : '120rpx'
      };
    },
    // 计算剩余天数 
    daysRemaining() {
      if (!this.endTime)  return -1;
      const end = new Date(this.endTime).getTime(); 
      const now = Date.now(); 
      return Math.ceil((end  - now) / (1000 * 60 * 60 * 24));
    },
    // 时间状态文本 
    timeStatusText() {
      if (!this.endTime)  return '';
      
      const endDate = new Date(this.endTime); 
      const formattedDate = `${endDate.getFullYear()}-${(endDate.getMonth()+1).toString().padStart(2,  '0')}-${endDate.getDate().toString().padStart(2,  '0')}`;
      
      if (this.daysRemaining  < 0) {
        return `已于 ${formattedDate} 到期`;
      } else if (this.daysRemaining  === 0) {
        return '今日到期';
      } else {
        return `有效期至 ${formattedDate}`;
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
.fee-card {
  position: relative;
  // margin: 20rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
 
  ::v-deep .u-cell {
    padding: 28rpx 30rpx;
  }
 
  .time-display {
    padding: 0 30rpx 20rpx;
    font-size: 24rpx;
    color: #909399;
    display: flex;
    align-items: center;
 
    .days {
      margin-left: 10rpx;
      color: #f56c6c;
    }
  }
}
</style>